<template>
    <div>
        <div>
            <ul class="el-upload-preview">
                <li v-for="(item, index) in filesUrl" :key="index">
                    <span class="operator">
                        <span @click="previewImg(item.url)">预览</span>
                        <span @click="deleteImg(item.file)">删除</span>
                    </span>
                    <img :src="item.url" alt="" >
                </li>
            </ul>
        </div>
        <div class="el-upload" @click="chooseFile" @dragover="preventDefault" @drop.prevent="handleChangeFile($event,'drop')">
            <el-icon name="plus" :size="20"></el-icon>
            <input type="file" multiple class="el-upload__input" ref="input" @change="handleChangeFile($event,'input')" />
        </div>
    </div>
</template>

<script>
// Preview组件是预览功能，可以根据需求，自由扩展
import Preview from "./preview.vue"
export default {
    name: 'el-upload',
    props:{
        size:{
            // 限制上传文件的大小，单位: Bit
            type:Number,
            default:1024*1024
        },
        accept:{
            // 限制上传文件的类型:字符串
            type:String,
            default:"image/jpeg, image/jpg"
        }
    },
    data() {
        return {
            tmpFiles: [],
            filesUrl:[]
        }
    },
    methods: {
        preventDefault(e){
            e.preventDefault()
        },
        chooseFile() {
            this.$refs.input.click()
        },
        handleChangeFile(e,source) {
            let fArr = [];
            if(source == 'input'){
                fArr = Array.from(e.target.files);
            }
            if(source == 'drop'){
                fArr = Array.from(e.dataTransfer.files);
            }
            // 校验
            if(!this.checkFiles(fArr)) return;
            console.log("源头文件:",fArr)
            // 会重复上传同一个文件bug
            this.tmpFiles = [...this.tmpFiles, ...fArr];
            console.log("内存文件:",this.tmpFiles)
        },
        checkFiles(filesArr) {
            const { size, accept } = this
            // 校验格式
            if (filesArr.some(file => accept.indexOf(file.type) == -1)) {
                this.$message({ message: '文件格式不对！', type: 'warning' })
                return false;
            }
            // 校验大小
            if (filesArr.some(file => file.size > size)) {
                this.$message({ message: '文件大小超过限制！', type: 'warning' })
                return false;
            }
            return true;
        },
        showFiles(filesArr){
            // 每次刷新文件后，都重新来一次读取文件
            this.filesUrl = []
            filesArr.forEach(file=>{
                const fileReader = new FileReader();
                fileReader.readAsDataURL(file);
                fileReader.onload = ()=>{
                    this.filesUrl.push({
                        url:fileReader.result,
                        file:file
                    })
                }
            })
        },
        deleteImg(file){
            this.tmpFiles = this.tmpFiles.filter(item=>item!==file);
        },
        previewImg(url){
            this.$modal({params:{url:url},template:Preview})
        }
    },
    watch:{
        tmpFiles(val){
            this.$message({message:'触发更新'})
            this.showFiles(val);
        }
    }
}
</script>

<style lang="scss">
@import "./index.scss"
</style>